<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/menu.css">
  <!-- <link rel="stylesheet" href="./css/menu/reset.css"> -->
  <link rel="stylesheet" href="./fonts/menu/iconfont.css">
  <link rel="stylesheet" href="./fonts/menu/iconfont/iconfont.css">
  <link rel="stylesheet" href="./fonts/menu/iconfont/iconfont.ttf">
</head>

<body>
  <div class="top">
    <h2 class="tit">菜单</h2>
    <div class="search w">
      <span class="iconfont icon-sousuo"></span>
      <span>精品肥牛</span>
    </div>
    <div class="point w">
      <a href="#">
        点菜
      </a>
      <div class="line">
      </div>
    </div>
    <div class="pic w">
      <img src="./images/menu/caidan.png" alt="">
    </div>
  </div>
  <div class="category">
    <aside class="aside_left">
      <ul>
        <li>
          <a href="#" class="active">锅底味型</a>
        </li>
        <li>
          <a href="#">锅具餐具</a>
        </li>
        <li>
          <a href="#">精选荤菜</a>
        </li>
        <li>
          <a href="#">丸滑菜品</a>
        </li>
        <li>
          <a href="#">精选素菜</a>
        </li>
        <li>
          <a href="#">油碟调料</a>
        </li>
        <li>
          <a href="#">豆面制品</a>
        </li>
        <li>
          <a href="#">小吃凉菜</a>
        </li>
      </ul>
    </aside>
    <aside class="aside_right">
      <ul>
        <li>
          <div class="aside_item">
            <img src="./images/menu/feiniu.png" alt="">
            <div class="aside_pop r">
              <h3>渝冬来重庆牛油老火锅渝冬老火锅渝冬
              </h3>
              <p>精选现杀火牛的腹肉手工打卷。</p>
              <div class="price"><span>￥</span><span>29.</span><span>99</span></div>
              <a class="choose">选规格</a>
            </div>
          </div>
        </li>
        <li>
          <div class="aside_item">
            <img src="./images/menu/feiniu.png" alt="">
            <div class="aside_pop ">
              <h3>渝冬来重庆牛油老火锅渝冬老火锅渝冬
              </h3>
              <p>精选现杀火牛的腹肉手工打卷。</p>
              <div class="price"><span>￥</span><span>29.</span><span>99</span></div>
              <a class="choose ">选规格</a>
            </div>
          </div>
        </li>
        <li>
          <div class="aside_item">
            <img src="./images/menu/feiniu.png" alt="">
            <div class="aside_pop ">
              <h3>渝冬来重庆牛油老火锅渝冬老火锅渝冬
              </h3>
              <p>精选现杀火牛的腹肉手工打卷。</p>
              <div class="price "><span>￥</span><span>29.</span><span>99</span></div>
              <a class="choose r">选规格</a>
            </div>
          </div>
        </li>
        <li>
          <div class="aside_item">
            <img src="./images/menu/feiniu.png" alt="">
            <div class="aside_pop ">
              <h3>渝冬来重庆牛油老火锅渝冬老火锅渝冬
              </h3>
              <p>精选现杀火牛的腹肉手工打卷。</p>
              <div class="price "><span>￥</span><span>29.</span><span>99</span></div>
              <a class="choose ">选规格</a>
            </div>
          </div>
        </li>
        <li>
          <div class="aside_item">
            <img src="./images/menu/feiniu.png" alt="">
            <div class="aside_pop ">
              <h3>渝冬来重庆牛油老火锅渝冬老火锅渝冬
              </h3>
              <p>精选现杀火牛的腹肉手工打卷。</p>
              <div class="price "><span>￥</span><span>29.</span><span>99</span></div>
              <a href="#" class="choose">选规格</a>
            </div>
          </div>
        </li>
        <li>
          <div class="aside_item">
            <img src="./images/menu/feiniu.png" alt="">
            <div class="aside_pop">
              <h3>渝冬来重庆牛油老火锅渝冬老火锅渝冬
              </h3>
              <p>精选现杀火牛的腹肉手工打卷。</p>
              <div class="price"><span>￥</span><span>29.</span><span>99</span></div>
              <a class="choose">选规格</a>
            </div>
          </div>
        </li>
      </ul>


    </aside>
  </div>
  <!-- 底部开始 -->
  <footer>
    <div class="home">
      <a href="index.html">
        <div>
          <img src="./images/common/tab-index.png" alt="">
        </div>
        <span>首页</span>
      </a>
    </div>
    <div class="menu active">
      <a href="menu.html">
        <div>
          <img src="./images/common/tab-category-active.png" alt="">
        </div>
        <span>菜单</span>
      </a>
    </div>
    <div class="shopcar">
      <a href="gouwuche.html">
        <div>
          <img src="./images/common/tab-cart.png" alt="">
        </div>
        <span>购物车</span>
      </a>
    </div>

    <div class="mine">
      <a href="mine.html">
        <div>
          <img src="./images/common/tab-mine.png" alt="">
        </div>
        <span>我的</span>
      </a>
    </div>

  </footer>
  <!-- 底部结束 -->
  <div class="commodity-detail " id="commodity-detailPage">
    <div class="commodity-detail-content">
      <div class="type-area commodity-detail-content01 ">
        <div class="commodity-detail-confirm ">
          <img src="./images/menu/commodity.png " alt=" ">
          <div class="commodity-detail-text ">
            <h4>好厨私人订制毛肚私人订制毛肚私人订制毛肚</h4>
            <p>已选：250g/中份</p>
            <div class="commodity-detail-price ">
              <span>￥</span><span>29.</span><span>99</span>
            </div>
            <i class="iconfont icon-baseline-close-px commodity-close" id="finalConfirmClose"></i>
          </div>
        </div>
      </div>
      <div class="type-area commodity-detail-content02 ">
        <p>规格</p>
        <ul class="commodity-specifications ">
          <li>250g</li>
          <li>250g</li>
          <li>250g</li>
        </ul>
      </div>
      <div class="type-area commodity-count ">
        <div class="commodity-count-button ">
          <i class="iconfont icon-yidiandiantubiao11 "></i>
          <i>1</i>
          <i class="iconfont icon-jiahao "></i>
        </div>
      </div>
      <div class="commodity-finalConfirm" id="finalConfirm">
        <a href="menu.html">选好了</a>
      </div>
    </div>
  </div>
  <script>
    document.querySelector('.choose').onclick = function () {
      document.getElementById('commodity-detailPage').style.display = 'block';
    };
    document.getElementById('finalConfirmClose').onclick = function () {
      document.getElementById('commodity-detailPage').style.display = 'none';
    };
  </script>
</body>

</html>